<template>
  <div class="materialList">
    <div class="title">{{ $t("editFormula.list") }}</div>
    <div class="list" v-loading="loading">
      <div class="one">
        <!-- <div
          :class="[oneActive == 'isView' ? 'active' : '', 'm-item-one']"
          @click="selectOne('isView')"
        >
          <div class="icon">
            <el-icon><Wallet /></el-icon>
          </div>
          <div class="label">{{ $t("editFormula.reel") }}</div>
        </div> -->
        <div
          v-for="(menu, key) in material"
          :key="key"
          :class="[oneActive == key ? 'active' : '', 'm-item-one']"
          @click="selectOne(key)"
        >
          <div class="icon">
            <el-icon><component :is="menu.icon" /></el-icon>
          </div>
          <div class="label">{{ menu.label }}</div>
        </div>
      </div>
      <div class="two">
        <!-- <div class="isview" v-if="oneActive == 'isView'">
          <div class="head">
            <div class="add" @click="addView">+ {{ $t("common.add") }}</div>
          </div>
          <div :class="['v-item', reelIndex == index ? 'active' : '']" v-for="(page, index) of reelList" :key="index" @click="selectView(index, page)">
            <span class="text">{{ page.name }}</span>
            <el-dropdown trigger="click">
              <el-icon class="icon"><MoreFilled /></el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="oprea of pageOprea" :key="oprea.evt" @click="opearClcik(oprea.evt, index)">{{ oprea.name }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div> -->
        <div v-for="child of twoMenu" :key="child.id" class="m-item-two">
          <menuItems :materials="child" />
        </div>
        <div class="no-data" v-if="twoMenu.length == 0">暂无物料</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, reactive, watch, toRefs, ref } from "vue";
import { MaterialList } from "./material/index.js";
import menuItems from "./component/menuItem.vue";
import { Wallet } from "@element-plus/icons-vue";
import editStore from "@/store/editStore.js";
import { componentInstall } from "../materialList/material/index.js";
import { useI18n } from "vue-i18n";
import { Label } from "./material/label.js";
import { ProLabel } from "./material/proLable.js";
import { Desiccant } from "./material/desiccant.js";
import { Humidity } from "./material/humidity.js";

componentInstall(); //将物料配置组件注册位全局组件
const store = editStore();
const { t: $t } = useI18n();

let activeKey = reactive({
  oneActive: null,
});
let pageOprea = [
  { name: $t("common.delete"), evt: "delete" },
  { name: $t("common.copy"), evt: "copy" },
];
let loading = ref(true);
let material = computed(() => {
  let list = store.materialList;
  let labels = [];
  list.label.forEach((item, index) => {
    let l = new Label({
      code: item.materialCode,
      length: item.length,
      width: item.width,
      picName: item.imgPath[0],
      name: item.materialName,
      description: item.description,
    });
    labels.push(l);
  });
  let desiccants = [];
  list.desiccant.forEach((item, index) => {
    let d = new Desiccant({
      code: item.materialCode,
      length: item.length,
      width: item.width,
      picName: item.imgPath[0],
      weight: item.weight,
      name: item.materialName,
      description: item.description,
    });
    desiccants.push(d);
  });
  let humiditys = [];
  list.humidityCard.forEach((item) => {
    let h = new Humidity({
      code: item.materialCode,
      length: item.length,
      width: item.width,
      picName: item.imgPath[0],
      name: item.materialName,
      description: item.description,
    });
    humiditys.push(h);
  });
  let proLabel = [];
  list.proLabel.forEach((item, index) => {
    let l = new ProLabel({
      code: item.materialCode,
      length: item.length,
      width: item.width,
      picName: item.imgPath[0],
      name: item.materialName,
      description: item.description,
    });
    proLabel.push(l);
  });
  MaterialList.Labels.list = labels;
  MaterialList.Desiccant.list = desiccants;
  MaterialList.Humidity.list = humiditys;
  MaterialList.ProLabel.list = proLabel;
  return MaterialList;
});
let twoMenu = computed(() => {
  return activeKey.oneActive ? material.value[activeKey.oneActive].list : [];
});
let reelIndex = computed(() => store.reelIndex);
let reelList = computed(() => store.reelConfig.reelList);

function selectOne(key) {
  activeKey.oneActive = key;
}

function addView() {
  // store.addReelList();
}

function deleteView(index) {
  // store.deleteReelList(index);
}

function selectView(index) {
  // store.changeReelIndex(index);
}

function copyView(index) {
  // store.copyReelList(index);
}

function opearClcik(evt, index) {
  switch (evt) {
    case "delete":
      if (reelList.value.length == 1) {
        return ElMessage.warning("盘数不能少于1");
      }
      ElMessageBox.confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteView(index);
        })
        .catch((e) => {
          console.log(e);
        });
      break;
    case "copy":
      copyView(index);
      break;
    default:
      break;
  }
}

watch(
  () => material.value,
  () => {
    setTimeout(() => {
      loading.value = false;
      activeKey.oneActive = "Labels";
    }, 500);
  },
  { deep: true, immediate: true }
);

let { oneActive } = toRefs(activeKey);
</script>
<style scoped lang="scss">
$color: #bbb;
.materialList {
  width: 100%;
  height: 100%;
  border-right: 1px solid $color;
  .title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-bottom: 1px solid $color;
  }
  .list {
    width: 100%;
    height: calc(100% - 30px);
    // padding: 20px 5px;
    display: flex;
    .one {
      width: 65px;
      padding: 10px 5px;
      border-right: 2px solid $color;
      .m-item-one {
        margin-bottom: 5px;
        border-radius: 5px;
        padding: 5px 0;
        .icon {
          text-align: center;
          font-size: 16px;
        }
        .label {
          text-align: center;
          font-size: 14px;
        }
      }
    }
    .two {
      flex: 1;
      padding: 10px 5px;
      .m-item-two {
        width: 100%;
        margin-bottom: 10px;
        border-radius: 5px;
        padding: 4px 0;
        font-size: 12px;
        &:hover {
          color: #0084fe;
          background-color: rgba(211, 234, 254, 0.3);
        }
      }
      .isview {
        width: 100%;
        margin-top: -10px;
        .head {
          display: flex;
          height: 40px;
          align-items: flex-end;
          justify-content: flex-end;
          .add {
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            cursor: pointer;
            &:hover {
              color: #0084fe;
            }
          }
        }
        .v-item {
          height: 32px;
          border-radius: 2px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 5px;
          padding: 0 5px;
          .icon {
            cursor: pointer;
            transform-origin: 8px;
            transform: rotate(90deg);
            color: #0084fe;
          }
        }
      }
    }
    .active {
      color: #0084fe;
      background-color: #d3eafe;
    }
  }
}
</style>
